<template>
  <div>
  <!-- 左侧导航栏 -->
  <Sider hide-trigger>
  	<div class="one">
  		<Row>
  			<Col span="24">
  			<p style="height: 100px;">
  				<img src="../../build/logo.png" class="img2" />
  			</p>
  			</Col>
  		</Row>
  		<Row>
  			<Col span="24">
  			<p style="height: 20px;" class="p">
  				憨憨
  			</p>
  			</Col>
  		</Row>
  		<Row>
  			<Col span="24">
  			<p style="height: 15px;" class="p1">
  				暂未设置个人标签
  			</p>
  			</Col>
  		</Row>
  		<Row>
  			<Col span="24">
  			<p style="height: 60px;" class="p2">
  				<Button class="btn">去上课</Button>
  			</p>
  			</Col>
  		</Row>
  		<!-- 修改密码 -->
  		<Modal title="修改密码" v-model="modal" width="60%">
  			<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-position="labelPosition" class="xiugai">
  				<FormItem label="新密码" prop="password">
  					<Input v-model="formValidate.password" placeholder="至少6位密码，至多20位密码，区分大小写" prefix="ios-lock-outline" type="password"
  					 password />
  					</Input>
  				</FormItem>
  				<FormItem label="确认新密码" prop="aginer">
  					<Input v-model="formValidate.aginer" placeholder="确认密码" prefix="ios-lock-outline" type="password"></Input>
  				</FormItem>
  				<FormItem label="验证码" prop="yzm">
  					<div class="di">
  						<Input v-model="formValidate.yzm" placeholder="请输入4位数验证码" prefix="ios-apps-outline">
  						</Input>
  						<Button>获取验证码</Button>
  					</div>
  				</FormItem>
  				<FormItem prop="mail">
  					<div class="di-two">
  						<Button>保存</Button>
  					</div>
  				</FormItem>
  			</Form>
  		</Modal>

  		<!-- 我的消息 -->
  		<div class="tion">
  			<Modal v-model="modal1" title="消息查看" width="70%">
  				<div class="bodys">
  					暂无数据
  				</div>

  			</Modal>
  		</div>
  		<Row>
  			<Col span="12">
  			<p style="height: 35px;" class="i1">
  				<i class="el-icon-unlock" @click="modal = true">修改密码</i>
  			</p>
  			</Col>
  			<Col span="12">
  			<p style="height: 35px;" class="i">
  				<i class="el-icon-message-solid" @click="modal1 = true">我的消息</i>
  			</p>
  			</Col>
  		</Row>
  	</div>
  	<!-- 第二部分 -->
  	<div class="two">
  		 <ul class="ul" @select="changeRoute">
  		     <router-link to="/personal"><li index="1"><i class="el-icon-user"><span>个人中心</span></i></li></router-link>
  			<li index="2"><i class="el-icon-edit-outline"><span>添加考试</span></i></li>
  			<li index="3"><i class="el-icon-collection"><span>添加课程</span></i></li>
  			<li index="4"><i class="el-icon-folder-opened"><span>添加模板</span></i></li>
  			<li index="5"><i class="el-icon-document"><span>添加计划</span></i></li>
  			<li index="6"><i class="el-icon-data-analysis"><span>学习报告</span></i></li>
  		</ul>
  	</div>
  </Sider>

  <!-- 中间内容 -->
  <Content>
  	<router-view></router-view>
  </Content>
</div>
</template>
<script>
export default {
		data() {
			/* 修改密码校验 */
			const validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('密码不能为空'));
				} else {
					if (this.formValidate.aginer !== '') {
						// 对第二个密码框单独验证
						this.$refs.formValidate.validateField('aginer');
					}
					callback();
				}
			};
			const validatePassCheck = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('密码不能为空'));
				} else if (value !== this.formValidate.password) {
					callback(new Error('两次输入的密码不同'));
				} else {
					callback();
				}
			};
			return {
				modal1: false,
				theme3: 'light',
				percentage: 100,
				modal: false,
				labelPosition: 'top',
				formValidate: {
					password: '',
					aginer: '',
					yzm: '',

				},
				/* 修改密码校验 */
				ruleValidate: {
					password: [{
						validator: validatePass,
						tigger: 'blur',
						required: true,

					}],
					aginer: [{
						validator: validatePassCheck,
						tigger: 'blur',
						required: true,
					}],
					yzm: [{
						required: true,
						message: '验证码不能为空',
						tigger: 'blur'
					}]
				}
			}

		},
		components: {

		},
		methods: {
			/* 给通知框定义 */
			info() {
				/* info填内容 */
				this.$Message.info('该课程该进度已完成');
			},
			changeRoute (index) {
				console.log(index)
			  let map = new Map()
			  map.set('1', '/main')
			 map.set('2', '/examination')
			  let routeUrl = map.get(index)
			  this.$router.push(routeUrl)
			  }
		}
	}
</script>

<style>
  @import url("../css/class.css");
	@import url("../css/header.css");
	@import url("../css/sader.css");
	@import url("../css/sader-two.css");
  </style>
